<template>
  <div class="fast_mod" :class="themeClass">
    <v-nav :title="$t('FastTransaction.Leveraged positions')"></v-nav>
    <div class="fast_mod_box">
      <van-sticky :offset-top="44">
        <div class="fast_mod_box_tabs">
          <div class="moomoo-tabs">
            <van-tabs v-model="active" @click="onRefresh" color="#DAAB51">
              <van-tab :title="$t('FastTransaction.Still holding')"></van-tab>
              <van-tab :title="$t('FastTransaction.history')"></van-tab>
            </van-tabs>
          </div>
        </div>
      </van-sticky>
      <div class="fast_mod_box_list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
          <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
            <div v-for="(item, index) in fastOrderList" :key="index" class="fast_mod_box_list_data">
              <div class="fast_mod_box_list_data_info">
                <h1>
                  {{ item.symbol }}
                </h1>
                <div class="buy">
                  <van-button :color="item.direction == 1 ? '#0BBA99' : '#EE3E57'">{{ item.direction == 1 ? $t('FastTransaction.buy long') : $t('FastTransaction.Short sale') }}</van-button>
                  <p>
                   
                    <span> {{ (item.update_price-item.buy_price).toFixed(2)}}</span>
                    <!-- <span>{{ item.buy_money }} {{ item.symbol_pricing }}</span> -->
                  </p>
                </div>

                <div class="buy-info">
                  <div class="buy-info-left">
                    <p>
                      <span>{{ $t('FastTransaction.Order No') }}:</span>
                      <span>{{ item.order_no }}</span>
                    </p>
                    <p>
                      <span>{{ $t('FastTransaction.Buying time') }}:</span>
                      <span>{{ item.buy_time }}</span>
                    </p>
                    <p>
                      <span>{{ $t('FastTransaction.buy current price') }}:</span>
                      <span>{{ item.buy_price }}</span>
                    </p>
                    <p>
                      <span>{{ $t('FastTransaction.handling fee') }}:</span>
                      <span>{{ item.commission }} {{ item.symbol_pricing }}</span>
                    </p>
                    <p>
                      <span>{{ $t('Fast.保证金') }}:</span>
                      <span>{{ item.caution_money }}</span>
                    </p>
                    <p v-if="active === 1">
                      <span>{{ $t('FastTransaction.settlement time') }}:</span>
                      <span>{{ item.close_time }}</span>
                    </p>
                    <p v-if="active === 1">
                      <span>{{ $t('FastTransaction.Settlement current price') }}:</span>
                      <span>{{ item.close_price }}</span>
                    </p>
                    <p v-if="active === 1">
                      <span>{{ $t('FastTransaction.Settlement amount') }}:</span>
                      <span>{{ item.close_money }} {{ item.symbol_pricing }}</span>
                    </p>
                    <p>
                      <span>{{ $t('Fast.止盈') }}:</span>
                      <span>{{ item.target_profit_price }}</span>
                    </p>
                    <p>
                      <span>{{ $t('Fast.止损') }}:</span>
                      <span>{{ item.stop_loss_price }}</span>
                    </p>
                    <p>
                      <span>{{ $t('Fast.current price') }}:</span>
                      <span>{{ parseFloat(item.update_price).toFixed(2) }}</span>
                    </p>
                    
                    <p>
                      <span>{{ $t('ContractPosition.multiple') }}:</span>
                      <span>{{ (item.multiple)}}</span>
                    </p>
                    <!-- <p>
                      <span>{{ $t('Fast.盈亏') }}:</span>
                      <span>{{ (item.update_price-item.buy_price).toFixed(2)}}</span>
                    </p> -->
                    <!-- 订单时长 -->
                    <!-- <p>
                      <span>{{ $t('FastTransaction.Order duration') }}:</span>
                      <span>{{ item.seconds }}s</span>
                    </p> -->
                  </div>
                  <!-- <div class="buy-info-right" v-if="active === 1">
                    <p>{{ $t('FastTransaction.Profit and loss') }}</p>
                    <p>
                      {{ item.gain == 1 ? '+' : '' }}{{ item.profit_money }}
                      <span>{{ item.symbol_pricing }}</span>
                    </p>
                  </div> -->

                 
                </div>
              </div>
              <!-- 倒计时 -->
              <!-- <div v-if="active === 0" class="dateBox">
                {{ $t('FastTransaction.Trade countdown') }}:
                <van-count-down :time="item.countdown * 1000" class="datetime" @finish="clearTime(index)" />
              </div> -->
              <div  @click="pingcang(item)" style="display: flex;justify-content: end;" v-if="active === 0">
                    
                    <van-button color="#0BBA99">{{ $t('Fast.平仓') }}</van-button>
                  </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FastTransaction',
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      fastOrderList: [],
      active: 0,
      isDayTime: false,
      ds:false,
      timer:{},
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  destroyed(){
    clearInterval(this.timer);
  },
  methods: {
    async pingcang(params){
      console.log(params,'params')
      console.log('平仓---')
      await this.$https.get('/coin/optionJiesuan?id='+params.id).then(res => {
          console.log(res,'返回的结果')
          if(res.code==1){
            
          }
          this.$toast(res.msg)
          this.dss()
      })
    },
    async getOptionOrderList() {
      await this.$https.get('/coin/getOptionOrderList?page=' + this.page + '&status=' + this.active).then(res => {
        if (this.refreshing) {
          this.fastOrderList = []
          this.refreshing = false
        }
        if(this.ds){
          this.fastOrderList = []
        }
        this.fastOrderList = [...this.fastOrderList, ...res.data.data]
        this.loading = false

        if (this.page >= res.data.last_page) {
          this.finished = true
        } else {
          this.page++
        }
      })
    },

    // 上拉加载处理函数
    onLoad() {
      this.dss()
    },
    dss(){
      if(this.timer){
        clearInterval(this.timer);
      }
     
     this.timer=setInterval(() => {
      this.ds=true
      this.getOptionOrderList()
     }, 2000);
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.page = 1
      this.loading = true
      this.onLoad()
    },
    clearTime(index) {
      this.fastOrderList.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
